<template>
    <tableLayout :columns="columns" :get="getData" :params="params"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelect: onSelectItemChange, type: 'radio' }"
        ref="layout">

        <template #button>
            <a-button type="primary" style="margin-left: 20px" @click="taskHandle">办理</a-button>
            <a-button type="primary" style="margin-left: 20px" @click="flowProcess">进度</a-button>
        </template>

        <template #operationMore="item">
            <div class="editable-row-operations">
                <span>
                    <a @click="taskHandle(null,item.value.record)">办理</a>
                </span>
                <span>
                    <a @click="flowProcess(null,item.value.record)">进度</a>
                </span>

            </div>
        </template>

    </tableLayout>
    <Modal ref="flowViewerModal" :editItem="selectedItem" style="top:0;bottom:0;"></Modal>
    <HandleTask v-model:visible="isModalVisible" :taskDefinitionKey="taskDefinitionKey" :processInstanceId="processInstanceId" />

</template>

<script lang="ts" setup>
import tableLayout from '@/components/tableLayout/tableLayout.vue';
import { defineComponent, ref, onMounted, onBeforeMount } from 'vue';
import { notification, message } from 'ant-design-vue';
import { mapState, useStore } from 'vuex';
import { getData, completeTask } from '@/api/flowToDo';
import Modal from '../../components/flowViewer/flowViewer.vue';
import HandleTask from '../workbenches/handleTask.vue';
let store = useStore();
const layout = ref();
const columns = [
    { title: '主键', dataIndex: 'Id' },
    { title: '名称', dataIndex: 'Name' },
    { title: '创建时间', dataIndex: 'CreatedDate' },
]

let params = ref();
const flowViewerModal = ref();
const taskDefinitionKey = ref();
const processInstanceId = ref();
// 模态框显隐状态
const isModalVisible = ref(false);
const taskHandle = (event:any,record: any) => {
    taskDefinitionKey.value = record.TaskDefinitionKey;
    isModalVisible.value = true;
    processInstanceId.value = record.ProcessInstanceId;
}

const flowProcess = (event:any,record: any) => {
    if (record)
        selectedItem.value = record;

    if (selectedItem.value) {
        flowViewerModal.value.open();
    }
}

onBeforeMount(() => {
    params.value = { InvolvedUser: store.state.user.user_id };
});

//多选
const selectedRowKeys = ref<any[]>([]);
const selectedItem = ref<any>({});
const onSelectChange = (keys: []) => {
    selectedRowKeys.value = keys;
}

const onSelectItemChange = (record: {}, selected: any) => {
    selectedItem.value = record;
}

</script>

<style lang="scss" scoped>
.editable-row-operations a {
    margin-right: 8px;
}
</style>